/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react'
// import qs from 'qs'
import { SearchPannel } from './searchPannel'
import { List } from './list'
import { cleanObject, useDebounce, useMount } from '../../utils'
import { useHttp } from '../../utils/http'

const apiUrl = process.env.REACT_APP_API_URL
console.log(apiUrl)

export const ProjectListScreen = () => {
	const [params, setParams] = useState({
		name: '',
		personId: ''
	})

	const debouncedParam = useDebounce(params, 500)
	const [users, setUsers] = useState([])
	const [list, setList] = useState([])
	const client = useHttp()

	useEffect(() => {
		client('projects', { data: cleanObject(debouncedParam) }).then(setList)
		// fetch(`${apiUrl}/projects?${qs.stringify(cleanObject(debouncedParam))}`)
		// 	.then(async (res) => {
		// 		if (res.ok) {
		// 			// console.log(await res.json());
		// 			setList(await res.json())
		// 		} else {
		// 			alert('errooo response')
		// 		}
		// 	})
		// 	.catch(() => alert('err'))
	}, [debouncedParam])

	useMount(() => {
		client('users').then(setUsers)

		// fetch(`${apiUrl}/users`).then(async (res) => {
		// 	if (res.ok) {
		// 		setUsers(await res.json())
		// 	}
		// })
	})

	return (
		<div>
			<SearchPannel params={params} setParams={setParams} users={users} />
			<List list={list} users={users}></List>
		</div>
	)
}
